import React from 'react'

/**
 * 受控组件, 就是将 HTML 中的 value 值统一交给 React 的 state 处理
 */
class Handler extends React.Component {
  state = {
    inputVal: '',    // 输入框初始化
    textareaVal: '', // 文本域初始化
    selectVal: '',   // 下拉框初始化
    isChecked: false // 复选框初始化
  }

  changeValue = (e) => {
    // 3. 获取到操作的元素
    const target = e.target
    // 4. 根据元素的类型获取到对应元素的值
    const name = target.name
    // 5. 获取到声明的name属性
    const value = target.type === 'checkbox' ? target.checked : target.value
    this.setState({
      // [name]是js动态分配语法, 因为name是动态的, 所以需要[]包裹
      [name]: value
    })
  }

  render() {
    return (
      <div>
        <p>
          {/* 1. 给每一个表单元素绑定一个 name 属性 */}
          {/* 2. 将每一个表单元素绑定一个相同的 onChange 事件 */}
          {/* 文本框 */}
          <input name="inputVal" type="text" value={ this.state.inputVal } onChange={ this.changeValue }/>
        </p>
        <p>
          {/* 文本域 */}
          <textarea name="textareaVal" value={ this.state.textareaVal } onChange={ this.changeValue }></textarea>
        </p>
        <p>
          {/* 下拉框 */}
          <select name="selectVal" value={ this.state.selectVal } onChange={ this.changeValue }>
            <option value="zhangsan">张三</option>
            <option value="lisi">李四</option>
            <option value="wangwu">王五</option>
          </select>
        </p>
        <p>
          {/* 复选框 */}
          <input name="isChecked" type="checkbox" checked={ this.state.isChecked } onChange={ this.changeValue }/>
        </p>
      </div>
    )
  }
}

export default Handler